<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 数据统计(地域) </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-container>
                <el-header>
                    <div class="block">
                        <span class="demonstration">日期选择：</span>
                        <el-date-picker
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </div>
                </el-header>
                <el-main>
                    请选择省：
                    <el-cascader :props="props"></el-cascader>
                </el-main>
                <el-footer>
                    <el-row>
                        <el-col :span="6">
                            合伙人总销量<br /><br />
                            {{ sumhhr }}
                        </el-col>
                        <el-col :span="6">
                            大客户总销量<br /><br />
                            {{ sumdkh }}
                        </el-col>
                        <el-col :span="6">
                            销售统计<br /><br />
                            {{ xxtj }}
                        </el-col>
                        <el-col :span="6"></el-col>
                    </el-row>
                </el-footer>
            </el-container>
        </div>
    </div>
</template>

<script>
let id = 0;
export default {
    name: 'dataStatistics',
    data() {
        return {
            value1: '',
            props: {
                lazy: true,
                lazyLoad(node, resolve) {
                    const { level } = node;
                    setTimeout(() => {
                        const nodes = Array.from({ length: level + 1 }).map((item) => ({
                            value: ++id,
                            label: `选项${id}`,
                            leaf: level >= 2
                        }));
                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                        resolve(nodes);
                    }, 0);
                }
            },
            sumhhr: 123,
            sumdkh: 12,
            xxtj: 24,
            items: [
                { type: '', label: '成交用户数量' },
                { type: '', label: '用户注册统计' },
                { type: '', label: '销售统计' }
            ]
        };
    },
    methods: {
        changea() {},
        handleChange(value) {
            console.log(value);
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        resetDateFilter() {
            this.$refs.filterTable.clearFilter('date');
        },
        clearFilter() {
            this.$refs.filterTable.clearFilter();
        },
        formatter(row, column) {
            return row.address;
        },
        filterTag(value, row) {
            return row.tag === value;
        },
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        getCustomerData() {
            // 查询订单表和大客户和合伙人表
            this.$axios.get('/api/getCustomerData').then((res) => {
                this.sumhhr = res.data.data.res2;
                this.sumdkh = res.data.data.korder; 
                this.xxtj = res.data.data.res; //销售统计
            });
        }
    },
    mounted: function () {
        this.getCustomerData();
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
